﻿@using System.Web.Script.Serialization
@{
    ViewBag.Title = "Cart";
}

<h2>Cart</h2>

<div class="row-fluid">
    
    <div class="span4">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Product</th>
                    <th>attributeinfo</th>
                    <th>Subtotal</th>
                    <th>Quantity</th>
                    <th></th>
                </tr>
            </thead>
            <tbody >
                <!-- ko foreach: Cart.items -->
                <tr>
                    <td >
                        
                        <span data-bind="text: $index()+1"></span>  
                    </td>
                    <td>  
                        <span data-bind="text:ProductName" ></span>
                    </td>
                    <td>
                        <span data-bind="text:AttributeInfo" >  </span>
                    </td>
                    <td>
                        <span data-bind="text:subtotal()"></span>
                    </td>
                    <td> 
                        <span data-bind="text:Quantity"></span>
                    </td>
                    <td>
                        <button class="btn btn-primary" type="button" data-bind='click: $parent.Cart.remove'>Remove</button>
                    </td>
                </tr>
                <!-- /ko -->
            </tbody>
        </table>
        <table class="table">
            <tr class="success">
                <td>
                    Total: <span data-bind='text: Cart.grandTotal()'> </span>
                </td>
                <td>
                    <button class="btn btn-primary" type="button" data-bind='click: Cart.checkOut'>Send Order</button>
                </td>
            </tr>
        </table>

    </div>
</div>

@{
    var model = ViewBag.Model;

    var jsonStr = new HtmlString(new JavaScriptSerializer().Serialize(model));
}

@section scripts{
    <script>
        var init = @jsonStr;
        
        var CartApp = CartApp || {};

        CartApp.CartItem = function(id,
            attributeInfo,
            pictureUrl, 
            productVariantId, 
            productId, 
            productName,
            quantity, 
            sku,
            unitpirce) 
        {
            var self = this;

            self.Id =ko.observable(id);
            self.AttributeInfo=ko.observable(attributeInfo);
            self.PictureUrl=ko.observable(pictureUrl);
            self.ProductVariantId=ko.observable(productVariantId);
            self.ProductId=ko.observable(productId);
            self.ProductName = ko.observable(productName);
            self.Quantity = ko.observable(quantity);
            self.Sku= ko.observable(sku);
            self.UnitPrice= ko.observable(unitpirce);
            self.subtotal = ko.computed(function() {
                return self.UnitPrice() * self.Quantity();
            });

        };

        CartApp.Cart = function() {
            var self = this;

            self.items = ko.observableArray([]);
            self.add = function(item) {
                    self.items.remove(function(p) { return p.Id === item.Id; });
                    self.items.push(new CartApp.CartItem(item));
            };

            self.remove = function(item) {
                self.items.remove(function(p) { return p.Id === item.Id; });
            };

            self.checkOut = function() {
                location.href = "/checkout/shippingaddress";
                //var dataToSave = { CustomerName: viewModel.UserId, OrderTotal: self.grandTotal() };
                //dataToSave.Books = [];
                //$.each(self.items(), function (idx, item) {
                //    var dataItem = ko.toJS(item.product);
                //    dataToSave.Books.push(dataItem);
                //});

                //$.ajax({
                //    url: "/api/order",
                //    data: JSON.stringify(dataToSave),
                //    type: "POST",
                //    contentType: "application/json; charset=utf-8",
                //    dataType: "json"
                //}).done(function () {
                //    self.items.removeAll();
                //    $.each(viewModel.Books(), function (idx, book) {
                //        book.selectedQuantity(0);
                //    });
                //    toastr.success("Your order has been submitted!");
                //}).error(function (data) {
                //    toastr.error("Your order is invalid!");
                //});
            };

            self.grandTotal = ko.computed(function() {
                var total = 0;
                $.each(self.items(), function() { total += this.subtotal(); });
                return total;
            });
        };

        CartApp.Page = function() {
            var self = this;
            self.Cart = new CartApp.Cart();
        };
        var vm = new CartApp.Page();
        ko.applyBindings(vm);
        
        $.each(init.Items, function (idx, item) {
            var cartItem = new CartApp.CartItem(item.Id, item.AttributeInfo, item.PictureUrl, item.ProductVariantId, item.ProductId, item.ProductName, item.Quantity, item.Sku, item.UnitPrice);
            
            vm.Cart.items.push(cartItem);
        });
        
    </script>
    }